<template>
    <div>
        <div class="bg-box-img">
            <img :src="bgImg" alt="" class="bg-img">
        </div>
        <div class="registered-box">
            <p class="registered-box-title">新用户注册</p>
            <input type="text" class="idCard" placeholder="请输入身份证号码" v-model="idCard">
            <input type="text" class="username" placeholder="请输入姓名" v-model="username">
            <input type="text" class="phone" placeholder="请输入手机号码" v-model="phone">
            <div class="agreement-box">
                <input type="radio" id="myRadio"  name="myRadio" value="1" class="agreement-box-radio">
                <span>我已经阅读并接受</span>
                <a href="http://bd.zac.cn/bdwap/login-agreement">《注册协议》</a>
            </div>
            <div class="registered-btn" @click="registered_btn()">
                立即注册
            </div>
        </div>
    </div>
</template>

<script>
import $                                from 'jquery'
import EnvConfig                        from '../config/env.config'
import ApiConfig                        from '../config/api.config'
import Rules                            from '../assets/js/utils/regular.util'
import { Indicator,Toast }              from 'mint-ui';
export default {
    name: 'Information',
    data() {
        return {
            bgImg:require("../assets/images/indexBg_img2x.png"),
            phone:'',
            username:'',
            idCard:''
        }
    },
    mounted(){
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
    },
    methods:{
        // 立即注册按钮
        registered_btn(){
            if(this.idCard!=''&&this.username!=''&&this.phone!=''){
                //身份证校验
                if(Rules.isIdCard(this.idCard)){
                    //姓名校验
                    if(Rules.isUser(this.username)){
                        //电话号校验
                        if(Rules.isPhone(this.phone)){
                            //获得 单选选按钮name集合  
                            var radios = document.getElementsByName("myRadio");        
                            //根据 name集合长度 遍历name集合  
                            for(var i=0;i<radios.length;i++)  
                            {   
                                //判断那个单选按钮为选中状态  
                                if(radios[i].checked){     
                                }else{
                                    Toast({
                                        message: '请勾选注册协议！',
                                        position: 'center',
                                        duration: 2000
                                    });
                                    return;
                                }   
                            }   
                        }else{
                            Toast({
                                message: '请输入正确的手机号！',
                                position: 'center',
                                duration: 2000
                            });
                            this.phone='';
                            return;
                        }
                    }else{
                        Toast({
                            message: '姓名为汉字！',
                            position: 'center',
                            duration: 2000
                        });
                        this.username='';
                        return;
                    }
                }else{
                    Toast({
                        message: '请输入正确的身份证号！',
                        position: 'center',
                        duration: 2000
                    });
                    this.idCard='';
                    return;
                }
                console.log(this.idCard,this.username,this.phone)
                // this.BEGAN_REGISTERED = `${EnvConfig.API_URL}${ApiConfig.BEGAN_REGISTERED}`;
                // this.$fetch(this.BEGAN_REGISTERED,'POST',{
                //     format: "json",
                //     callback:'',
                //     from: 'webapp_music', 
                //     method:"baidu.ting.billboard.billList",
                //     type:'1',
                //     size:10,
                //     offset:0
                // })
                // .then((res) => {
                //     console.log(res)
                // })
                // .catch(err => {
                //     console.log(err)            
                // })  
            }else{
                Toast({
                    message: '输入框不能为空！',
                    position: 'center',
                    duration: 2000
                });
            }
        }
    }
}
$(function(){
    // 定义预处理事件
    document.body.onmousedown = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        if (target.type === 'radio'&& target.id=="myRadio") {//确定元素
            target.previousValue = target.checked;
        }
    }
    // 定义点击事件
    document.body.onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        if (target.type === 'radio' && target.id=="myRadio") {
            if (target.previousValue) {//根据预处理结果 确定选中取消
                target.checked = false;
            }
        }
    }
    $(".idCard").blur(function(){
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
    })
    $(".username").blur(function(){
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
    })
    $(".phone").blur(function(){
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
    })
})
</script>

<style lang="less" scoped>
.bg-box-img{
    width: 100%;
    
    .bg-img{
        display: inline-block;
        width: 100%;
    }
}
.registered-box{
    position: absolute;
    width: 95%;
    background-color: #fff;
    border-radius: 5px;
    top: 200px;
    left: 2.5%;
    padding: 0 20px;
    box-sizing: border-box;
    .registered-box-title{
        width: 100%;
        height: 50px;
        float: left;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        color:#333;
    }
    .idCard{
        display: inline-block;
        width: 100%;
        height: 50px;
        background-color: #ccc;
        outline: none;
        border: none;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .username,.phone{
        display: inline-block;
        width: 100%;
        height: 50px;
        background-color: #ccc;
        outline: none;
        border: none;
        margin-top: 15px;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .idCard::-webkit-input-placeholder{
        color: #aab2bd;
        font-size: 12px;
    }
    .agreement-box{
        width: 100%;
        float: left;
        height: 30px;
        line-height: 30px;
        margin-top: 30px;
        text-align: center;
        overflow: hidden;
        // background-color: red;
        .agreement-box-radio{
            position: relative;
            top: 3px;
        }
    }
    .registered-btn{
        width: 80%;
        height: 50px;
        line-height: 50px;
        background-color: red;
        margin-left: 10%;
        text-align: center;
        float: left;
        margin-top: 10px;
        border-radius: 25px;
        color:#fff;
        font-size: 16px;
        // box-shadow: 0 15px 30px red;
        margin-bottom: 20px;
    }
}
</style>
